<template>
  <div class="topbar">
    <div class="topbar-right">
      <span class="topbar-user">{{ displayUsername }}</span>
      <div class="dropdown" @click="toggleMenu">
        <!-- 齿轮SVG -->
        <svg class="gear-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"/>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 7 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 5 15.4a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 5 7a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 5.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09c0 .66.39 1.26 1 1.51a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.66 0 1.26.39 1.51 1H21a2 2 0 0 1 0 4h-.09c-.66 0-1.26.39-1.51 1z"/>
        </svg>
        <div v-if="showMenu" class="dropdown-menu" @click.stop>
          <div class="dropdown-item" @click="goUser">用户管理</div>
          <div class="dropdown-item" @click="logout">退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
const router = useRouter()
const showMenu = ref(false)

// 计算显示的用户名
const displayUsername = computed(() => {
  const username = localStorage.getItem('username')
  return username || 'admin'
})

function toggleMenu(e) {
  showMenu.value = !showMenu.value
}

function handleClickOutside(event) {
  if (!event.target.closest('.dropdown')) {
    showMenu.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
function logout() {
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  localStorage.removeItem('userType')
  router.push('/admin/login')
}
function goUser() {
  router.push('/admin/user')
}
</script>

<style scoped>
.topbar {
  width: 100%;
  height: 72px;
  background: #34495e;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 48px;
  box-sizing: border-box;
}
.topbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.topbar-user {
  font-size: 18px;
  color: #fff;
  margin-right: 18px;
  font-weight: 500;
}
.gear-icon {
  cursor: pointer;
  margin-left: 12px;
  color: #fff;
  transition: color 0.2s;
}
.gear-icon:hover {
  color: #409eff;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  right: 0;
  top: 28px;
  background: #fff;
  color: #34495e;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  min-width: 120px;
  z-index: 100;
  padding: 8px 0;
}
.dropdown-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background: #f5f6fa;
}
</style>